<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title> 医疗数据中心大屏</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
        <link rel="stylesheet" href="./css/index.css">
        <script src="./js/flexible.js"></script>
        <script src="./js/jquery.min.js"></script>

    </head>

    <body>
        <div class="title">
            医疗数据中心大屏
        </div>
        <div class="mainbox">

            <!-- 设备统计 数量-->
            <div class="num">
                <ul>
                    <li>
                        <div class="num_title">已维修设备数</div>
                        <di class="num_num ok_num"></di>
                    </li>
                    <li>
                        <div class="num_title">设备故障数</div>
                        <di class="num_num all_num"></di>
                    </li>
                    <li>
                        <div class="num_title">设备总数</div>
                        <di class="num_num equipment_num"></di>
                    </li>
                    <li>
                        <div class="num_title">待保养设备数</div>
                        <di class="num_num maintained_num"></di>
                    </li>
                    <li>
                        <div class="num_title">已保养设备数</div>
                        <di class="num_num equipment_ok_num"></di>
                    </li>
                </ul>
            </div>
            <!-- 圆形统计图 -->
            <div class="circular">
                <div class="circular_echsrts" id="circular"></div>
                <ul>
                    <li style="color: #F59927;">设备故障率</li>
                    <li style="color: #544BD5;">设备总数</li>
                    <li style="color: #DBC632;">本月故障率</li>
                    <li style="color: #209883;">本周故障率</li>
                </ul>
            </div>
            <!-- 设备故障情况 波线图 -->
            <div class="wave">
                <div class="maintain_title">
                    <div class="maintain_title_left">设备故障情况</div>
                    <div class="maintain_title_right" id="choice_operation">
                        <span style="margin-right:0.8125rem" id="wave_content">周</span>
                        <img src="./img/dowm.png" alt="">
                        <ul class="maintain_title_list wave_week">
                            <li class="week">周</li>
                            <li class="month">月</li>
                        </ul>
                    </div>
                </div>
                <div class="wave_echarts" id="wave"></div>
            </div>
            <!-- 待保养设备详情 -->
            <div class="maintain">
                <div class="maintain_title">
                    <div class="maintain_title_left">待保养设备详情</div>
                    <div class="maintain_title_right">
                        <span style="margin-right:0.8125rem"
                            id="maintain_content">周</span>
                        <img src="./img/dowm.png" alt="">
                        <ul class="maintain_title_list maintain_week">
                            <li class="week">周</li>
                            <li class="month">月</li>
                        </ul>
                    </div>
                </div>
                <div class="maintain_echarts" id="maintain">
                </div>
                <div class="com-screen-content">
                    <div class="topRec_List maintained">
                        <dl>
                            <dd>科室</dd>
                            <dd>ID</dd>
                            <dd>名称</dd>
                            <dd>型号</dd>
                        </dl>
                        <div id="maintain_list" class="maquee">
                            <ul>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 设备操作记录  -->
            <div class="operation">
                <div class="maintain_title">
                    <div class="maintain_title_left">设备操作记录</div>
                    <div class="maintain_title_right">
                        <span style="margin-right:0.8125rem"
                            id="operation_content">周</span>
                        <img src="./img/dowm.png" alt="">
                        <ul class="maintain_title_list operation_week">
                            <li class="week">周</li>
                            <li class="month">月</li>
                        </ul>
                    </div>
                </div>
                <div class="maintain_echarts" id="operation"></div>
                <div class="com-screen-content">
                    <div class="topRec_List operationed">
                        <dl>
                            <dd>时间</dd>
                            <dd>科室</dd>
                            <dd>ID</dd>
                            <dd>名称</dd>
                            <dd>型号</dd>
                        </dl>
                        <div class="maquee" id="operation_list">
                            <ul>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 设备故障详情 列表 -->
            <div class="detail">
                <div class="detail_title">故障设备详情</div>
                <dl>
                    <dd>科室</dd>
                    <dd>ID</dd>
                    <dd>名称</dd>
                    <dd>型号</dd>
                </dl>
                <div id="detail_list">
                    <ul>

                    </ul>
                </div>
            </div>
            <!-- 进入系统 -->
            <div class="enter">
                进入系统
            </div>
        </div>

        <!--  <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> -->
        <script src="./js/echarts.js"></script>
        <script src="./js/wave.js"></script>
        <script src="./js/circular.js"></script>
        <script src="./js/maintain.js"></script>
        <script src="./js/operation.js"></script>
        <script src="./js/detail.js"></script>
        <script>
        var baseUrl = 'http://ylsb.xibuts.cn/hIBWzukObC.php/Phase'

        var interval
        $(document).ready(function () {
            getNum()//设备统计 数量
            getcircular()//圆形统计图
            getwave()// 设备故障情况
            getoperation()//设备操作记录
            getdetail()//设备故障详情
            getmaintain()//带保养设备详情
        });
        function getNum() {
            $.ajax({
                url: baseUrl+"/getRecord",
                type: 'POST',
                dataType: "json",
                success: function (data) {
                    $(".ok_num").text(data.data.ok_num)
                    $(".all_num").text(data.data.all_num)
                    $(".equipment_num").text(data.data.equipment_num)
                    $(".maintained_num").text(data.data.maintained_num)
                    $(".equipment_ok_num").text(data.data.equipment_ok_num)
                },
                // 超时时间
                timeout: 2000,
                // 失败的回调
                error: function () {
                    clearInterval(interval);
                    alert('设备数量统计请求数据失败！')
                }
            })
        }
        (function () {
            interval = setInterval(function () {
                getNum();
                getcircular()
                getwave()
                getoperation()
                getdetail()
                getmaintain()
            }, 1800000);
            /*    }, 1800000); */
        })();

        var a = 0
        $('.enter').click(function () {
            if (a == 0) {
                requestFullScreen()
                a = 1
            } else {
                a = 0
                exitFullscreen()
            }

        })

        //进入全屏
        function requestFullScreen() {
            var de = document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
        }

        //退出全屏
        function exitFullscreen() {
            var de = document;
            if (de.exitFullscreen) {
                de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
                de.webkitCancelFullScreen();
            }
        }

    </script>
    </body>

</html>